<extend name="Base/common"/>
<block name="body">
    <!-- <META HTTP-EQUIV="pragma" CONTENT="no-cache">  -->
    <title>个人信息</title>
    <script type="text/javascript">
    </script>
    <body style="background:#faf8f8;">
        <!--注册-->
        <form action="{:U('usersave')}" method="post" class="form-horizontal" id="mac" enctype="multipart/form-data" >
            <div id="personNews">
                <header><a href="{:U('Index/index')}" class="back"><img src="__IMG__/images/back_03.png"/></a>个人信息
                <input type="button" class="ajax-file btn_1" target-form="form-horizontal" value="保存"></header>
                <ul>
                    <li class="liToggle">
                        <strong class="f-fl">我的头像</strong>
                        <span class="f-fr photo"><img src="{$data.logo|getimg=###}" width="60" height="60" id="tupian" /></span>
                        <img src="__IMG__/images/peronNewjt_06.jpg" class="personjt"/>
                    </li>
                    <li class="display-block" style="display: none; height: 185px">
                        <!-- 11111 -->
                     <div class="lazy_tip" id="lazy_tip"><span>1%</span><br>    载入中......</div>
                     <div class="lazy_cover"></div>
                     <div class="resource_lazy hide"></div>
                     <div class="pic_edit">
                        <!-- <h2 style="color:#4eaf7a;">双指旋转和双指缩放</h2> -->
                        <div id="clipArea"></div>
                        <div class="getIMg" style="width:100%;position:fixed;bottom:0px;text-align:center;">
                            <input type="button" id="upload2" value="选择图片">
                            <input type="button" id="clipBtn" value="上传图片">
                        </div>
                        <input type="file" id="file" style="opacity: 0;position: fixed;bottom: 0;background: red;width: 48%;">
                         <div id="plan" style="display:none">比例剪切后尺寸<canvas id="myCanvas"></canvas><h2 onClick="Close();" style="cursor:pointer; display:inline-block">关闭</h2></div>
                     </div>
                     <img src="" fileName="" id="hit" style="display:none;z-index: 9">

                     <div id="cover"></div>
                        <!-- 11111 -->
                        <script>
                        var hammer = '';
                        var currentIndex = 0;
                        var body_width = $('body').width();
                        var body_height = $('body').height();
                        $("#clipArea").photoClip({
                            width: body_width * 0.8125,
                            height: body_width * 0.8125,
                            file: "#file",
                            view: "#hit",
                            ok: "#clipBtn",
                            loadStart: function () {
                                console.log("照片读取中");
                                $('.lazy_tip span').text('');
                                $('.lazy_cover,.lazy_tip').show();
                            },
                            loadComplete: function () {
                                console.log("照片读取完成");
                                $('.lazy_cover,.lazy_tip').hide();
                            },
                            clipFinish: function (dataURL) {
                                $('#hit').attr('src', dataURL);
                                saveImageInfo();
                            }
                        });
                        
                        //图片上传
                        function saveImageInfo() {
                            var filename = $('#hit').attr('fileName');
                            var img_data = $('#hit').attr('src');
                            if(img_data==""){alert('null');}
                            // alert(filename); 
                            $.post("{:U('file/save')}", {image: img_data,filename:filename}, function (data) {
                                if (data != '') {
                                    console.log(data);
                                    history.go(0) 
                                    // data 为返回文件名；
                                    // alert('提交成功');
                                }else{
                                    alert('修改不成功');
                                }
                            });
                        }
                        /*获取文件拓展名*/
                        function getFileExt(str) {
                            var d = /\.[^\.]+$/.exec(str);
                            return d;
                        }
                        // //图片上传结束
                        $(function () {
                            $('#file').on('touchstart', function () {
                                //图片上传按钮
                                
                            });
                        })


                        function Close(){$('#plan').hide();}

                        // 渲染 Image 缩放尺寸
                        var file = '';  
                        function render(src){  
                            var MAX_HEIGHT = 256;  //Image 缩放尺寸 
                            // 创建一个 Image 对象  
                            image = new Image();  
                            
                            // 绑定 load 事件处理器，加载完成后执行  
                            image.onload = function(){  
                                // 获取 canvas DOM 对象  
                                var canvas = document.getElementById("myCanvas"); 
                                // 如果高度超标  
                                if(image.height > MAX_HEIGHT) {  
                                    // 宽度等比例缩放 *=  
                                    image.width *= MAX_HEIGHT / image.height;  
                                    image.height = MAX_HEIGHT;  
                                }  
                                // 获取 canvas的 2d 环境对象,  
                                // 可以理解Context是管理员，canvas是房子  
                                var ctx = canvas.getContext("2d");  
                                // canvas清屏  
                                ctx.clearRect(0, 0, canvas.width, canvas.height); 
                                canvas.width = image.width;        // 重置canvas宽高  
                                canvas.height = image.height;  
                                // 将图像绘制到canvas上  
                                ctx.drawImage(image, 0, 0, image.width, image.height);  
                                // !!! 注意，image 没有加入到 dom之中  
                                
                             var dataurl = canvas.toDataURL("image/jpeg");  
                             var imagedata =  encodeURIComponent(dataurl); 
                                $('#plan').attr('data-src',dataurl); 
                              $('#plan').show();
                            };  
                            // 设置src属性，浏览器会自动加载。  
                            // 记住必须先绑定render()事件，才能设置src属性，否则会出同步问题。  
                            image.src = src;  
                        };  
                    </script>
                        <!-- <input type="file" name="pic"> -->
                    </li>
                    <li class="liToggle">
                        <strong class="f-fl">昵称</strong>
                        <span class="f-fr">{$data.nickname}</span>
                        <img src="__IMG__/images/peronNewjt_06.jpg" class="personjt"/>
                    </li>
                    <li class="display-block" style="display: none;">
                        <input type="text" id="nickname" name="nickname" value="{$data.nickname}" style="border:1px solid ;" maxlength="8">
                    </li>
                    <li class="liToggle">
                        <strong class="f-fl">性别</strong>
                        <span class="f-fr"><eq name="data.sex" value="1">男<else/>女</eq></span>
                        <img src="__IMG__/images/peronNewjt_06.jpg" class="personjt"/>
                    </li>
                    <li class="display-block" style="display: none;">
                        <input type="radio" class="radiossa"  style="margin-left: 170px;"  name="sex" value="1" <eq name="data.sex" value="1">checked="checked"</eq> />男
                        <input type="radio" class="radiossa"  style="margin-left: 170px;"  name="sex" value="2" <eq name="data.sex" value="2">checked="checked"</eq>/>女
                        <!-- <input type="radio" class="radio" name="sex" value="1"<eq name="data.sex" value="1"> checked="checked"</eq>>男
                        <input type="radio" class="radio" name="sex" value="2"<eq name="data.sex" value="2"> checked="checked"</eq>>女 -->
                    </li>
                    <li class="liToggle">
                        <strong class="f-fl">年龄</strong>
                        <span class="f-fr">{$data.age}</span>
                        <img src="__IMG__/images/peronNewjt_06.jpg" class="personjt"/>
                    </li>
                    <li class="display-block" style="display: none;">
                        <input type="text" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" id="age" value="{$data.age}" name="age" maxlength="2">
                    </li>
                    <li class="liToggle">
                        <strong class="f-fl">星座</strong>
                        <span class="f-fr">{$data.constell|getItemTitle='constell',###}</span>
                        <img src="__IMG__/images/peronNewjt_06.jpg" class="personjt"/>
                    </li>
                    <li class="display-block" style="display: none;">
                        <select name="constell" class="class-select">
                            <volist name='constell' id='vol'>
                                <option value="{$vol.value}" <eq name="vol.value" value="$data.constell"> selected="selected"</eq>>{$vol.title}</option>
                            </volist>
                        </select>
                    </li>
                    <li class="liToggle">
                        <strong class="f-fl">爱好</strong>
                        <span class="f-fr">{$data.love}</span>
                        <img src="__IMG__/images/peronNewjt_06.jpg" class="personjt"/>
                    </li>
                    <li class="display-block" style="display: none;">
                        <input type="text" id="love" name="love" value="{$data.love}" maxlength="8" placeholder="最多不能超过8个字符">
                    </li>
                    <li class="liToggle">
                        <strong class="f-fl">学校</strong>
                        <span class="f-fr">{$data.school}</span>
                        <img src="__IMG__/images/peronNewjt_06.jpg" class="personjt"/>
                    </li>
                    <li class="display-block" style="display: none;">
                        <input type="text" id="school" name="school" value="{$data.school}" style="border:1px solid ;" maxlength="8" placeholder="最多不能超过8个字符">
                    </li>
                    <li class="liToggle">
                        <strong class="f-fl">职业</strong>
                        <span class="f-fr">{$data.job}</span>
                        <img src="__IMG__/images/peronNewjt_06.jpg" class="personjt"/>
                    </li>
                    <li class="display-block" style="display: none;">
                        <input type="text" id="job" name="job" value="{$data.job}" style="border:1px solid ;" maxlength="8" placeholder="最多不能超过8个字符">
                    </li>
                    <li class="liToggle">
                        <strong class="f-fl">身份</strong>
                        <span class="f-fr">{$data.identity|getItemTitle='identity',###}</span>
                        <img src="__IMG__/images/peronNewjt_06.jpg" class="personjt"/>
                    </li>
                    <li class="display-block" style="display: none;">
                        <select name="identity" class="class-select">
                            <volist name='identity' id='vol'>
                                <option value="{$vol.value}" <eq name="vol.value" value="$data.identity"> selected="selected"</eq>>{$vol.title}</option>
                            </volist>
                        </select>
                    </li>
                    <li class="liToggle">
                        <strong class="f-fl">联系方式</strong>
                        <span class="f-fr">手机  {$data.mobile}</span>
                        <img src="__IMG__/images/peronNewjt_06.jpg" class="personjt"/>
                    </li>
                    <li class="display-block" style="display: none;">
                        <input id="mobile" type="text" name="mobile" value="{$data.mobile}" maxlength="11">
                    </li>
<!--                    <li class="liToggle">
                        <strong class="f-fl">位置</strong>
                        <span class="f-fr">{$data.area_id|getArea=###}</span>
                        <img src="__IMG__/images/peronNewjt_06.jpg" class="personjt"/>
                    </li>
                    <li class="display-block" style="display: none;">
                        <select name="pid">
                            <option value="" class="aaaa">{$towArea.ar_title}</option>
                            <volist name="areas" id="v">
                                <option value="{$v.id}">{$v.title}</option>
                            </volist>
                        </select>
                        <select name="area_id" class="class-area_id">
                            <option value="{$towArea.id}">{$towArea.title}</option>
                        </select>
                    </li>-->
                    <input type="hidden" name="id" value="{$data.id}"> 
                </ul>
            </div>
        </form>
    </body>
    <script type="text/javascript">
        
    </script>
    <script type="text/javascript">
        //切换点击的
        $('.liToggle').toggle(function () {
            $(this).next().show(500);
        }, function () {
            $(this).next().hide(500);
        });
        //ajax自写跳转
        $('.ajax-file').click(function () {
            var url = $('#mac').attr('action');
            var fd = new FormData($("#mac")[0]);
            $.ajax({
                url: url,
                type: "POST",
                data: fd,
                processData: false, // 告诉jQuery不要去处理发送的数据
                contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                success: function (data) {
                    var index = layer.alert(data.info, function () {
                           
                        location.href = "{:U('Index/index')}";
                    });
                }
            });
        })
        //修改昵称的
        $('#nickname').on('blur', function () {
            var val = $(this).val();
            $(this).parent().prev().find('span').replaceWith("<span class='f-fr'>" + val + "</span>");
            $('.display-block').hide(300);
        });
        //修改性别的
        $('.radiossa').on('change', function () {
            var val = $(this).val();
            if (val == 1) {
                val = "男";
            } else {
                val = "女";
            }
            $(this).parent().prev().find('span').replaceWith("<span class='f-fr'>" + val + "</span>");
            $('.display-block').hide(300);
        });
        //修改年龄的
        $('#age').on('blur', function () {
            var val = $(this).val();
            $(this).parent().prev().find('span').replaceWith("<span class='f-fr'>" + val + "</span>");
            $('.display-block').hide(300);
        });
        //修改星座的
        $('.class-select').on('change', function () {
            val = $(this).find('option:selected').html();
            $(this).parent().prev().find('span').replaceWith("<span class='f-fr'>" + val + "</span>");
            $('.display-block').hide(300);
        });
        $('#mobile').on('blur', function () {
            var val = $(this).val();
            $(this).parent().prev().find('span').replaceWith("<span class='f-fr'>手机  " + val + "</span>");
            $('.display-block').hide(300);
        });
        //地区联动
        $('select[name=pid]').change(function () {
            $('.aaaa').remove();
            $('select[name=area_id] option:gt(0)').remove();
            var id = $(this).val();
            $.post('__MODULE__/Area/areaList', {'id': id}, function (res) {
                $.each(res, function (index, el) {
                    $('select[name=area_id').append('<option value=\'' + el.id + '\'>' + el.title + '</option>');
                });
            });
        });
        //修改地区的
        $('.class-area_id').on('change', function () {
            val = $(this).find('option:selected').html();
            $(this).parent().prev().find('span').replaceWith("<span class='f-fr'>" + val + "</span>");
            $('.display-block').hide(300);
        });
		
		//lkl修改爱好的
        $('#love').on('blur', function () {
            var val = $(this).val();
            $(this).parent().prev().find('span').replaceWith("<span class='f-fr'>" + val + "</span>");
            $('.display-block').hide(300);
        });
		
		//lkl修改学校的
        $('#school').on('blur', function () {
            var val = $(this).val();
            $(this).parent().prev().find('span').replaceWith("<span class='f-fr'>" + val + "</span>");
            $('.display-block').hide(300);
        });
		
		//lkl修改工作的
        $('#job').on('blur', function () {
            var val = $(this).val();
            $(this).parent().prev().find('span').replaceWith("<span class='f-fr'>" + val + "</span>");
            $('.display-block').hide(300);
        });
		
		//lkl修改工作的
        $('#job').on('blur', function () {
            var val = $(this).val();
            $(this).parent().prev().find('span').replaceWith("<span class='f-fr'>" + val + "</span>");
            $('.display-block').hide(300);
        });
		
    </script>
</block>
